<template>
  <a-modal
    v-model:visible="visible"
    width="100%"
    wrap-class-name="tn-model-full-scroll common-task-detail-modal"
    :footer="null"
    :mask-closable="false"
    :keyboard="false"
    :after-close="handleClose"
  >
    <template #title> {{ configName }} </template>
    <a-layout v-if="taskInfo.drugBusinessConfigId && visible">
      <a-layout-content class="common-task-detail-modal-main">
        <div class="task-base-info">
          <a-row class="w-full">
            <a-col class="task-base-item" :span="6">
              <SvgIcon
                v-if="STATUS_MAP[taskInfo.status]"
                :name="STATUS_MAP[taskInfo.status]?.icon"
                :prefix="STATUS_MAP[taskInfo.status]?.prefix"
                size="48px"
              />
              <div>
                <div>{{ STATUS_MAP[taskInfo.status].label }}</div>
                <div>当前状态</div>
              </div>
            </a-col>
            <a-col class="task-base-item" :span="6">
              <SvgIcon name="createUser" prefix="icon-task" size="48px" />
              <div>
                <div>{{ taskInfo.createUserName || '无' }}</div>
                <div>创建人</div>
              </div>
            </a-col>
            <a-col class="task-base-item" :span="8">
              <SvgIcon name="createTime" prefix="icon-task" size="48px" />
              <div>
                <div>{{ taskInfo.createTime || '无' }}</div>
                <div>创建时间</div>
              </div>
            </a-col>
          </a-row>
        </div>
        <a-tabs v-model:activeKey="activeKey" class="main-tabs">
          <a-tab-pane v-if="!hideForm" key="1">
            <template #tab>
              <span>
                <!-- <Icon size="20"><CalendarAgenda28Regular /></Icon> -->
                表单配置
              </span>
            </template>
            <!-- 药房配置，appid写死-药房的业务配置里面只引用适用适用为药房管理的 -->
            <FormConfig
              v-if="activeKey === '1'"
              :task-info="taskInfo"
              :is-publish-user="true"
              :need-form="taskInfo.needForm"
              :form-business-level="3"
              :disabled="disabled"
              :disabled-no-need="true"
              :has-search="true"
              app-id="3120223396747542530"
              @reset-data="taskInfo.needForm = $event"
            >
            </FormConfig>
            <!-- <DetailInfo v-if="info.directoryList" :info="info" :is-submit="approvalInfo.isProval" /> -->
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span>
                <!-- <Icon size="20"><DatabaseOutlined /></Icon> -->
                文件配置
              </span>
            </template>
            <a-radio-group
              v-if="fileKeyList.length"
              v-model:value="fileKey"
              button-style="solid"
              class="mb-2"
              @change="changeFileKey"
            >
              <a-radio-button v-for="item in fileKeyList" :key="item.value" :value="item.value">{{
                item.label
              }}</a-radio-button>
            </a-radio-group>
            <FileList
              v-if="activeKey === '2'"
              :key="fileKey"
              :task-info="taskInfo"
              :need-file="taskInfo[taskInfo.isPerNeedFile]"
              :file-key="fileKey"
              :disabled="disabled"
              :is-need-select-folder="true"
              :is-by-project-type="true"
              no-data-msg="请先配置文件夹目录模板"
              :project-type="taskInfo.projectType"
              :filter-columns-code="'complementFile,signFlag'"
              :hide-sign-setting="true"
              :tag="currentFileTag"
              :is-input-folder="taskInfo.isInputFolder"
              @reset-data="taskInfo[taskInfo.isPerNeedFile] = $event"
            />
          </a-tab-pane>
          <a-tab-pane v-if="!hideFlow" key="3">
            <template #tab>
              <span>
                <!-- <Icon size="20"><ArrowRoutingRectangleMultiple20Regular /></Icon> -->
                流程配置
              </span>
            </template>
            <a-radio-group
              v-if="flowKeyList.length"
              v-model:value="flowKey"
              button-style="solid"
              class="mb-2"
              @change="changeFlowKey"
            >
              <a-radio-button v-for="item in flowKeyList" :key="item.value" :value="item.value">{{
                item.label
              }}</a-radio-button>
            </a-radio-group>
            <MyProgress
              v-if="activeKey === '3'"
              :key="flowKey"
              :task-info="taskInfo"
              :is-publish-user="true"
              :need-process="taskInfo[taskInfo.isPerNeedFlow]"
              :process-key="flowKey"
              :hide-sign-setting="true"
              :disabled="disabled"
              :tag="currentFlowTag"
              :copy-flow-tag="copyFlowTag"
              @reset-data="taskInfo[taskInfo.isPerNeedFlow] = $event"
            />
          </a-tab-pane>
        </a-tabs>
      </a-layout-content>
    </a-layout>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
// import { getNameShort } from '@@/utils/index'
// import { CalendarAgenda28Regular, ArrowRoutingRectangleMultiple20Regular } from '@vicons/fluent'
// import { DatabaseOutlined } from '@vicons/antd'
import { getBusinessConfigInfo, updateDrugBusinessConfig } from '@@/api/pharmacy/businessConfig'
import { STATUS_MAP } from './../index'
import {
  initConfigInfo,
  fileListTabs1,
  flowListTabs1,
  fileListTabs5,
  flowListTabs5,
  flowListTabs7,
  fileListTabs6,
  fileListTabs7
} from './index'

import MyProgress from '@@/components/TaskKanban/Progress/index.vue'

// import { message } from 'ant-design-vue'

const props = defineProps({
  //配置名称
  configName: {
    type: String,
    default: '配置'
  },
  taskStatus: {
    type: Number,
    default: 1 //1为可编辑状态（配置功能可写死）
  },
  //暂时用sop项目进度模板那一套接口project为项目级任务的一套接口
  sourceType: {
    type: String,
    default: 'progressTemplate' // 值为'project'时，右边会显示审批进度
  },
  isPerNeedFile: {
    //为适应是否需要文件接口所传参数不同添加的字段
    type: String,
    default: 'needFile'
  },
  isPerNeedForm: {
    //为适应是否需要文件接口所传参数不同添加的字段
    type: String,
    default: 'needForm'
  },
  isPerNeedFlow: {
    //为适应是否需要文件接口所传参数不同添加的字段
    type: String,
    default: 'needProcess'
  },
  isNeedSelectFolder: {
    //是否需要选择归档文档路径
    type: Boolean,
    default: false
  },
  // 是否需要文件
  needFile: {
    type: Boolean,
    default: false
  },
  // 右上角按钮文本
  confirmBtnName: {
    type: String,
    default: ''
  },
  // 是否需要审批
  isNeedAuth: {
    type: Boolean,
    default: false
  },
  // 需要展示的组件
  componentsArr: {
    type: Object,
    default: () => ({})
  },
  // 隐藏表单
  hideForm: {
    type: Boolean,
    default: false
  },
  // 隐藏流程
  hideFlow: {
    type: Boolean,
    default: false
  },
  // 是否手动输入文档归档目录
  isInputFolder: {
    type: Boolean,
    default: false
  }
})
const visible = ref()
const fileKey = ref<number>(1)
const fileKeyList = computed(() => {
  let columns: any = []
  switch (taskInfo.value.businessType) {
    case 1:
      columns = fileListTabs1
      break
    case 2:
      columns = []
      break
    case 5:
      columns = fileListTabs5
      break
    case 6:
      columns = fileListTabs6
      break
    case 7:
      columns = fileListTabs7
      break
    default:
      columns = []
  }
  return columns
})
const currentFileTag = computed(() => {
  const current = fileKeyList.value.find((i) => i.value === fileKey.value)
  return current?.tag
})
const changeFileKey = () => {
  taskInfo.value.isPerNeedFile = props.isPerNeedFile
}

const flowKey = ref<number>(1)
const flowKeyList = computed(() => {
  let columns: any = []
  switch (taskInfo.value.businessType) {
    case 1:
      columns = flowListTabs1
      break
    case 2:
      columns = []
      break
    case 5:
      columns = flowListTabs5
      break
    case 7:
      columns = flowListTabs7
      break
    default:
      columns = []
  }
  return columns
})
const currentFlowTag = computed(() => {
  const current = flowKeyList.value.find((i) => i.value === flowKey.value)
  return current?.tag
})
const copyFlowTag = computed(() => {
  const current = flowKeyList.value.find((i) => i.value === flowKey.value)
  return current?.copyFlowTag
})

const changeFlowKey = () => {
  taskInfo.value.isPerNeedFlow = props.isPerNeedFlow
}

const activeKey = ref('1')
function handleClose() {
  // 弹窗关闭前 把部分数据重置
  activeKey.value = '1'
  taskInfo.value = {}
  fileKey.value = 1
  flowKey.value = 1
}

const taskInfo = ref<any>({})
const detailId = ref<string>('')
const disabled = ref<boolean>(false)
async function show(id?: string, isReadonly?: boolean) {
  visible.value = true
  detailId.value = id || ''
  disabled.value = isReadonly || false
  if (props.hideForm) {
    activeKey.value = '2'
  }
  getDetailInfo()
}
const getDetailInfo = async () => {
  getBusinessConfigInfo({
    id: detailId.value
  }).then((res) => {
    taskInfo.value.taskId = detailId.value
    Object.assign(
      taskInfo.value,
      initConfigInfo(),
      {
        ...props,
        isPerNeedFile: props.isPerNeedFile,
        isPerNeedFlow: props.isPerNeedFlow,
        mainId: 'drugBusinessConfigId',
        sourceType: 'progressTemplate',
        updateFormRequiredApi: updateDrugBusinessConfig, // 更新表单是否必要
        updateFlowRequiredApi: updateDrugBusinessConfig, // 更新流程是否必要
        updateFileRequiredApi: updateDrugBusinessConfig // 更新文件是否必要
      },
      res
    )
  })
}

defineExpose({
  show
})
</script>
